@charset "UTF-8";

.box{
	width: 95%;
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 50px;
}
.box div{
	margin-left: -1px;
	margin-right: -1px;
}
table{
	font-size: 24px;
	width: 98%;
	padding: 1px;
	border-collapse: collapse;
}
table td{
	box-sizing: border-box;
	border:solid 1px #636363;
	/*padding-left: 30px;*/
}
.a{
	width: 149px;
	text-align: center;
}
.addsa{
	text-align: center;
	border-top: 1px solid #636363;
}

@media screen and (min-width:977px) {
	.banner {
		min-height: 550px;
		min-width: 960px;
		background-size: cover;
		background: #d7d7d7;
	}
	.banner .box {
		min-height: 550px;
		width: 960px;
		margin: 0 auto;
		position:relative;
	}
	.banner .box img {
		float: right;
		width: 604px;
		height: 545px;
	}
	.banner .box h3 {
		font-size: 48px;
		color: #00a5ac;
		float: left;
		margin-top: 61px;line-height: 140%;
	}
	.banner .box>div {
		width: 470px;
		height: 349px;
		float: left;
		margin-top: -20px;
		position: absolute;
		top: 270px;
		/*margin-left: -250px;*/
	}
	.banner .box h4 {
		font-size: 30px;line-height: 140%;
		margin-bottom: 20px;
	}
	.product {
		min-height: 600px;
		min-width: 960px;
			background:#141313 ;
		background-size: cover;
		position:relative;
	}
	.product .box {
		min-height: 600px;
		margin: 0 auto;
		position: relative;
		width: 960px;
	}
	.product  img{
		width: 500px;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	@media screen and (max-width:1300px){
		.product  img{
			width: 300px;
		}
	}
	.product .box h2 {
		font-size: 48px;
		color: #00a5ac;line-height: 140%;
		float: left;
		margin-top: 96px;
		/*margin-left: -470px;*/
	}
	.product .box h4 {
		font-size:30px;
		/*margin-left: -470px;*/
		float: left;
		color: white;
		/*margin-top: 30px;*/
	}
	/*.product .box h4*/
	.product .box>div {
		width: 530px;
		height: 349px;
		float: left;line-height: 140%;
		margin-top: 300px;
		margin-left: -120px;
	}
	.product .box>div>span {
		width: 88px;
		height: 88px;
		float: left;
		background: #00a5ac;
		color: white;
		text-align: center;
		line-height: 88px;
		font-size: 30px;
		border-radius: 50%;
		margin-bottom: 20px;
	}
	.product .box div:nth-of-type(2) {
		width: 100px;
		height: 320px;
		position: absolute;
		left: 120px;
		top:16px;
	}
	.product_one {
		min-height: 595px;
		min-width: 960px;
		background: url("../img/sugar/banner_03.png") no-repeat center;
		background-size: cover;
	}
	.product_one .box {
		min-height: 595px;
		width: 960px;
		margin: 0 auto;
	}
	.product_one .box h3 {
		font-size: 48px;
		color: #00a5ac;
		float: left;line-height: 140%;
		margin-top: 61px;
	}
	.product_one .box>div {
		width: 470px;
		height: 349px;
		float: left;line-height: 140%;
		margin-top: 260px;
		margin-left: -380px;
	}
	.product_one .box h4 {
		font-size: 30px;
		margin-bottom: 20px;
	}
	.product_two {
		min-height: 699px;
		min-width: 960px;
		background: url(../img/sugar/banner_04.png) no-repeat center;
		background-size: cover;
	}
	.product_two .box {
		min-height: 699px;
		width: 960px;
		margin: 0 auto;
	}
	.product_two .box h3 {
		font-size: 48px;
		color: #00a5ac;
		float: left;
		margin-top: 56px;line-height: 140%;
	}
	.were {
		margin: 0 auto;
		width: 100%;
		min-width: 960px;
		min-height: 664px;
	}
	.were_con {
		width: 960px;
		margin: 0 auto;
	}
	/*.cpin{*/
	/*background: #000000;*/
	/*}*/
	.cpin h1 {
		color: #00a5ac;
		font-size: 40px;
		margin-top: 20px;line-height: 140%;
		position: relative;
		text-align: center;
	}
	.cpin>h1>span {
		display: block;
		/*margin-top: -50px;*/
		width: 160px;
		position: absolute;
		top: 26px;
		border-top: 5px solid #00a5ac;
		/*background: #00a5ac;*/
	}
	.cpin>h1>span:nth-child(1) {
		left: 130px;
	}
	.cpin>h1>span:nth-child(2) {
		right: 130px;
	}
	.cpin>ul {
		display: flex;
		justify-content: space-around;
	}
	.cpin>ul>li>img {
		width: 90%;
	}
	.cpin>ul>li>dl {
		display: flex;
		color: #949494;
		text-align: center;
	}
	.cpin>ul>li>span {
		border: 1px solid #949494;
		border-radius: 5px;
		display: block;
		width: 80%;
		margin: 60px auto 30px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 25px;
		color: #949494;
	}
	.cpin>ul>li>dl>dd>img {
		border: 1px solid #949494;
		width: 80%;
	}
	.cpin>ul>li>dl>dd>p {
		font-size: 20px;
		line-height: 30px;
	}
	
	
	.box{
		width: 93%;
		max-width:1000px;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 50px;
	}
	.box div{
		margin-left: -1px;
		margin-right: -1px;
	}
	table{
		box-sizing: padding-box;
		width: 98%;
		padding: 1px;
		border-collapse: collapse;
	}
	table td{
		border:solid 1px #636363;
		padding-left: 30px;
		font-size: 24px;
	}
	.a{
		width: 149px;
		text-align: center;
	}
	.addsa{
		font-size: 46px;
		text-align: center;
		border-top: 1px solid #636363;
		width: 98%;
	}
}

@media screen and (min-width:785px) and (max-width:976px) {
	.banner {
		min-height: 550px;
		min-width: 768px;
		/*background: url(../img/小卡系列/card_01.png) no-repeat center;*/
		background: #d7d7d7;
		background-size: cover;
	}
	.banner .box {
		min-height: 550px;
		width: 768px;
		margin: 0 auto;
		position: relative;
	}
	.banner .box img {
		float: right;
		width: 478px;
		height: 528px;
	}
	.banner .box h3 {
		font-size: 36px;
		color: #00a5ac;line-height: 140%;
		float: left;
		margin-top: 81px;
	}
	.banner .box>div {
		width: 470px;
		height: 349px;
		float: left;
		position: absolute;
		left: 180px;
		top: 30px;
		margin-top: 250px;
		margin-left: -180px;
	}
	.banner .box h4 {
		font-size: 24px;line-height: 140%;
		margin-bottom: 20px;
	}
	.product {
		min-height: 717px;
		min-width: 768px;
		background:#141313;
		background-size: cover;
	}
	.product .box {
		min-height: 717px;
		margin: 0 auto;
		position: relative;
		width: 768px;
	}
		.product  img{

		width: 290px;
		float: right;
		margin-top:-500px;
	}
	.product .box h2 {
		font-size: 36px;line-height: 140%;
		color: #00a5ac;
		float: left;
		margin-top: 96px;
		/*margin-left: -470px;*/
	}
	.product .box h4 {
		font-size: 24px;line-height: 140%;
		/*margin-left: -470px;*/
		float: left;
		color: white;
		/*margin-top: 280px;*/
		line-height: 80px;
	}
	/*.product .box h4*/
	.product .box>div {
		width: 470px;
		height: 349px;
		float: left;
		margin-top: 70px;
		margin-left: 100px;line-height: 140%;
	}
	.product .box>div>span {
		width: 88px;
		height: 88px;
		float: left;
		background: #00a5ac;
		color: white;
		text-align: center;
		line-height: 88px;
		font-size: 30px;
		border-radius: 50%;
		margin-bottom: 20px;
	}
	.product .box div:nth-of-type(2) {
		width: 100px;
		height: 320px;
		position: absolute;
		top: 210px;
		left: -100px;
	}
	.product_one {
		min-height: 595px;
		min-width: 768px;
		background: url("../img/sugar/banner_03.png") no-repeat center;
		background-size: cover;
	}
	.product_one .box {
		min-height: 595px;
		width: 768px;
		margin: 0 auto;
	}
	.product_one .box h3 {
		font-size: 36px;
		color: #00a5ac;
		float: left;
		margin-top: 101px;line-height: 140%;
	}
	.product_one .box>div {
		width: 470px;
		height: 349px;
		float: left;
		margin-top: 290px;
		margin-left: -280px;
	}
	.product_one .box h4 {
		font-size: 24px;line-height: 140%;
		margin-bottom: 20px;
	}
	.product_two {
		min-height: 699px;
		min-width: 768px;
		background: url(../img/sugar/banner_04.png) no-repeat center;
		background-size: cover;
	}
	.product_two .box {
		min-height: 699px;
		width: 768px;
		margin: 0 auto;
	}
	.product_two .box h3 {
		font-size: 36px;
		color: #00a5ac;
		float: left;line-height: 140%;
		margin-top: 56px;
	}
	.were {
		margin: 0 auto;
		width: 100%;
		min-width: 768px;
		min-height: 664px;
	}
	.were_con {
		width: 768px;
		margin: 0 auto;
	}
	/*.cpin{*/
	/*background: #000000;*/
	/*}*/
	.cpin h1 {
		color: #00a5ac;
		font-size: 36px;
		margin-top: 20px;
		position: relative;line-height: 140%;
		text-align: center;
	}
	.cpin>h1>span {
		display: block;
		/*margin-top: -50px;*/
		width: 160px;
		position: absolute;
		top: 25px;
		border-top: 5px solid #00a5ac;
		/*background: #00a5ac;*/
	}
	.cpin>h1>span:nth-child(1) {
		left: 40px;
	}
	.cpin>h1>span:nth-child(2) {
		right: 40px;
	}
	.cpin>ul {
		display: flex;
		justify-content: space-around;
	}
	.cpin>ul>li>img {
		width: 90%;
	}
	.cpin>ul>li>dl {
		display: flex;
		color: #949494;
		text-align: center;
	}
	.cpin>ul>li>span {
		border: 1px solid #949494;
		border-radius: 5px;
		display: block;
		width: 80%;
		margin: 60px auto 30px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 25px;
		color: #949494;
	}
	.cpin>ul>li>dl>dd>img {
		border: 1px solid #949494;
		width: 80%;
	}
	.cpin>ul>li>dl>dd>p {
		font-size: 20px;
		line-height: 30px;
	}
	
	.box{
		width: 93%;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 50px;
	}
	.box div{
		margin-left: -1px;
		margin-right: -1px;
	}
	table{
		box-sizing: padding-box;
		width: 98%;
		padding: 1px;
		border-collapse: collapse;
	}
	table td{
		border:solid 1px #636363;
		padding-left: 30px;
		font-size: 22px;
	}
	.a{
		width: 140px;
		text-align: center;
	}
	.addsa{
		text-align: center;
		border-top: 1px solid #636363;
		width: 98%;
		font-size: 34px;
	}
}

@media screen and (max-width:784px) {
	.banner {
		max-width: 767px;
		min-width: 320px;
		min-height: 300px;
		background: #d7d7d7;
	}
	.banner .box {
		min-height: 300px;
		max-width: 767px;
		margin: 0 auto;
		position: relative;
	}.banner .box img {
		float: none;
		display: block;
		position:  static;
		width: 300px;
	margin: 0 auto;

		
	}
	.banner .box h3 {
		font-size:24px;
		color: #00a5ac;
		float: left;
		width: 100%;line-height: 140%;
		margin-top: 20px;
		text-align: center;
	}
	.banner .box>div {
		margin-top: 30px;
		width: 100%;
		height: auto;
		float: left;
		position: static;
		top: 120px;
		line-height: 20px;

		/*margin-top: -300px;*/
		/*margin-left: -250px;*/
	}
	.banner .box h4 {
text-align: center;
		font-size: 18px;line-height: 140%;
		margin-bottom: 5px;
	}
	
	
	.product {
		min-height: 300px;
		max-width: 767px;
		min-width: 320px;
		background:#141313;
		position:relative;
	}
	.product  img{
		width:290px;
		height: 170px;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.product .box {
		min-height: 300px;
		margin: 0 auto;
		position: relative;
		max-width: 767px;
	}
	.product .box h2 {
		font-size: 24px;
		color: #00a5ac;
		float: left;
		margin-top: 56px;
		line-height: 140%;
		margin-left: 20px;
	}
	.product .box h4 {
		font-size: 18px;
		/*margin-left: -470px;*/
		float: left;
		color: white;
		margin-bottom: 20px;
		line-height: 160%;
	}
	/*.product .box h4*/
	.product .box>div {
		width: 80%;
		height: 349px;
		float: left;
		margin-top: 20px;
		margin-left:60px;
	}
	.product .box>div>span {
		width: 40px;
		height: 40px;
		float: left;
		background: #00a5ac;
		color: white;
		text-align: center;
		line-height: 40px;
		font-size: 12px;
		border-radius: 50%;
		margin-bottom: 20px;
	}
	.product .box div:nth-of-type(2) {
		width: 50px;
		height: 320px;
		position: absolute;
		top:135px;
		left: -50px;
	}
	
	.product_one {
		min-height:300px;
		max-width: 767px;
		min-width: 320px;
		background: url("../img/sugar/banner_03.png") no-repeat center;
		background-size: cover;
	}
	.product_one .box {
		min-height: 300px;
	max-width: 767px;
		margin: 0 auto;
		position: relative;
	}
	.product_one .box h3 {
		font-size: 24px;
		color: #00a5ac;
		line-height: 140%;
		float: left;
		margin-top: 41px;
		margin-left: 10px;
		/*margin-left: -310px;*/
	}
	.product_one .box>div {
		width: 80%;
		height: 175px;
		float: left;
		position: absolute;
		top: 140px;
		margin-left: 10px;
	}
	.product_one .box h4 {
		line-height: 140%;
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	
	.product_two {
		min-height: 300px;
		max-width: 767px;
		background: url(../img/sugar/banner_04.png) no-repeat center;
		background-size: cover;
	}
	.product_two .box {
		min-height: 300px;
		max-width: 767px;
		margin: 0 auto;
	}
	.product_two .box h3 {
		font-size: 24px;
		color: #00a5ac;
		line-height: 140%;
		float: left;
		margin-top: 10px;
		margin-left: 20px;
	}
	
	
	.were {
		margin: 0 auto;
		max-width: 767px;
		min-height: 480px;
	}
	.were_con {
		max-width: 767px;
		margin: 0 auto;
	}
	/*.cpin{*/
	/*background: #000000;*/
	/*}*/
	.cpin h1 {
		margin-top: 20px;
		color: #00a5ac;
		line-height: 140%;
		font-size: 24px;
		position: relative;
		text-align: center;
	}
	.cpin>h1>span {
		display: none;
		/*margin-top: -50px;*/
		width: 160px;
		position: absolute;
		top: 38px;
		border-top: 5px solid #00a5ac;
		/*background: #00a5ac;*/
	}
	.cpin>h1>span:nth-child(1) {
		left: 40px;
	}
	.cpin>h1>span:nth-child(2) {
		right: 40px;
	}
	.cpin>ul {
		display: flex;
		justify-content: space-around;
	}
	.cpin>ul>li>img {
		width: 90%;
	}
	.cpin>ul>li>dl {
		display: flex;
		color: #949494;
		text-align: center;
	}
	.cpin>ul>li>span {
		border: 1px solid #949494;
		border-radius: 5px;
		display: block;
		width: 80%;
		margin: 60px auto 30px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 18px;
		color: #949494;
	}
	.cpin>ul>li>dl>dd>img {
		border: 1px solid #949494;
		width: 80%;
	}
	.cpin>ul>li>dl>dd>p {
		font-size: 18px;
		line-height: 30px;
	}
	.box{
		width: 93%;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 50px;
	}
	.box div{
		margin-left: -1px;
		margin-right: -1px;
	}
	table{
		box-sizing: padding-box;
		width: 98%;
		padding: 1px;
		border-collapse: collapse;
        font-size: 14px;
	}
	table td{
		border:solid 1px #636363;
		padding-left: 10px;
		font-size: 12px;
	}
	.a{
		width: 65px;
		text-align: left;
	}
	.addsa{
		text-align: center;
		border-top: 1px solid #636363;
		width: 98%;
		font-size: 14px;
	}
}